<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script lang="ts">
import echarts, { EChartOption } from 'echarts'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ResizeMixin from '@/components/Charts/mixins/resize'

export interface moneyPieData {
  dateRange: number
  data: number[]
}

@Component({
  name: 'moneyPie'
})
export default class extends mixins(ResizeMixin) {
  @Prop({ required: true }) private chartData!: moneyPieData
  @Prop({ default: 'money-chart' }) private className!: string
  @Prop({ default: '100%' }) private width!: string
  @Prop({ default: '480px' }) private height!: string

  private lineChartData1: any = []
  @Watch('chartData', { deep: true })
  private onChartDataChange(value: moneyPieData) {
    // console.log(this.chartData)
    this.setOptions(value)
  }
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  }
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }

  private initChart() {
    this.chart = echarts.init(this.$el as HTMLDivElement)
    this.setOptions(this.chartData)
  }

  private setOptions(chartData: any) {
    if (this.chart) {
      this.chart.setOption({
        title: {
          text: '',
          subtext: '',
          x: 'left'
        },
        color: [
          '#F4D761',
          '#3973F6',
          '#7844D7',
          '#DF6C7D',
          '#34A6D2',
          '#eb3a53'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: '15%',
          data: chartData[1],
          icon: 'circle',
          textStyle: {
            color: '#fft'
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '45%',
            center: ['50%', '35%'],
            data: chartData[0],
            itemStyle: {
              borderWidth: 1,
              borderColor: '#ffffff',
              legendHoverLink: false
            }
          }
        ]
      } as EChartOption<EChartOption.SeriesPie>)
    }
  }
}
</script>
